<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.5/js.cookie.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script src="../../js/http.js"></script>
    <title>添加商品</title>
    <link href="../../css/index.css" rel="stylesheet">

    <style>
        form {
            display: flex;
            flex-direction: column;
        }

        ul {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .img_big_logo {
            width: 100px;
        }

        img {
            width: 100%;
        }

        input {
            width: 100%;
            height: 30px;
        }

        textarea {
            width: 100%;
            height: 70px;
        }

        ul {
            width: 400px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
<div id="root">
    <ul v-if="comm">

        <li>名称:<textarea :value="comm.title" id="title" name=""></textarea></li>
        <li>
            <input id="img_big_logo" name="" type="file">
            <div class="img_big_logo">
                <img :src="comm.img_big_logo" alt="">
            </div>
        </li>
        <li>现价：<input :value="comm.price" id="price" name="" type="number"></li>
        <li>余量：<input :value="comm.goods_number" id="goods_number" name="" type="number"></li>
        <li>类型：<input :value="comm.category" id="category" name="" type="text"></li>
        <li>
            <button @click="updata()">提交修改</button>
        </li>
    </ul>
</div>
<script>
  let vm = new Vue({
    el: '#root',
    data() {
      return {
        goods_id: (() => {
          const search = new URLSearchParams(location.search);
          return search.get('goods_id');
        })(),
        comm: null,
      };
    },
    methods: {
      updata() {
        const title = document.getElementById('title').value;
        const img_big_logo = document.getElementById('img_big_logo').files[0];
        const price = document.getElementById('price').value * 1;
        const goods_number = document.getElementById('goods_number').value * 1;
        const category = document.getElementById('category').value;

        ajax({
          url: '/admin/goods/' + this.goods_id,
          method: 'PATCH',

          headers: {
            'Authorization': Cookies.get('token'),
            'Content-Type': 'application/json',
          },

          data: {
            title,
            img_big_logo,
            price,
            goods_number,
            category,
          },
        }).then((r) => {
          console.log(r.data);
          if (r.data.code === 1) {
            alert('修改成功!');
          } else {
            alert('请重新登录!');
            location.href = '../../login.html';
          }
        });
      },

    },
    mounted() {
      const that = this;
      ajax({
        url: '/goods/item/' + that.goods_id,
        method: 'GET',
        headers: {
          'Authorization': Cookies.get('token'),
        },
      }).then((r) => {
        if (r.data.code === 1) {
          that.comm = r.data.info;
          console.log(that.comm);
        } else {
          alert('加载失败！！！');
          location.href = '../../login.html';
        }
      });
    },
  });
</script>
</body>
</html>